
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./static/css/demo.css" type="text/css">
    <script src="./static/vue2.js"></script>
    <script src="./static/vue-router.js"></script>
    <script src="./static/jquery-1.10.2.min.js"></script>
    <style>
        .page li{ display:block; float:left; margin-left:5px; border:1px solid #999; padding:10px; }
        .page li a{ color:#67b168;}
        .active{ background-color:#d0e9c6}
    </style>
</head>

<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.id }}</td>
            <td>{{ person.title }}</td>
            <td>{{ person.pubdate }}</td>
            <td class="text-center"><button @click="deletePerson(index)">Delete</button></td>
        </tr>
        </tbody>
    </table>
    <ul class="page">
        <li v-for="i in pages" @click="removePage(i)" :class=" curPage == i ? 'active' : ''"><a href="">{{ i }}</a></li>
    </ul>
</div>
</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            newPerson:{
                name:'',
                age : '0',
                sex : 'Male'
            },
            people:"",
            curPage:2,
            pages:10
        },
        beforeCreate:function(){
            var vm = this;
            $.get('/API/public/',function(data){
                vm.people = data.info;
            },'json')
        },
        methods:{
            createPerson:function(){
                this.people.push(this.newPerson);
                this.newPerson = {name:'',age:0,sex:'Male'};
            },
            deletePerson:function(index){
                this.people.splice(index,1)
            },
            removePage:function(page){
                alert(page);
            }

        },
    })
</script>

</html>